<template>
  <div>
    <div class="box">
      <point-wave />
    </div>

    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br />
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
        >vue-cli documentation</a
      >.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li>
        <a
          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
          target="_blank"
          rel="noopener"
          >babel</a
        >
      </li>
      <li>
        <a
          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
          target="_blank"
          rel="noopener"
          >eslint</a
        >
      </li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li>
        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
      </li>
      <li>
        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
          >Forum</a
        >
      </li>
      <li>
        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
          >Community Chat</a
        >
      </li>
      <li>
        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
          >Twitter</a
        >
      </li>
      <li>
        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
      </li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li>
        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
          >vue-router</a
        >
      </li>
      <li>
        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/vue-devtools#vue-devtools"
          target="_blank"
          rel="noopener"
          >vue-devtools</a
        >
      </li>
      <li>
        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
          >vue-loader</a
        >
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
          rel="noopener"
          >awesome-vue</a
        >
      </li>
    </ul>
    <ul>
      <button @click="axiosclick">接口测试</button>
      <button @click="Websocketclick">Websocket接口测试</button>
      <button @click="axiosEncapsulationRandom">封装随机字符串接口测试</button>
      <button @click="axiosEncapsulationToken">封装JWT_token接口测试</button>
    </ul>
    <ul>
      <button @click="jumpErrorPView">跳转至报错界面</button>
      <button @click="jumpCommunication">跳转至聊天界面</button>
      <button @click="clearToken">清空token</button>
    </ul>
    <ul>
      <button @click="SelMySQL">MySQL查询测试</button>
      <button @click="InsMySQL">MySQL新增测试</button>
    </ul>
    <ul>
      <button @click="SaveFile">文件保存测试</button>
    </ul>
  </div>
</template>

<script>
//const axios = require("axios");
import axios from "axios";
import PointWave from "../backgroundCOMPO/PointWave.vue";
import {
  list,
  PostLogin,
  Seltest,
  Instest,
} from "../helloWorldCOMPO/HelloWorld.js";

export default {
  name: "HelloWorld",
  components: { PointWave },
  props: {
    msg: String,
  },
  methods: {
    axiosclick() {
      axios
        .get("http://139.196.222.182:5000/GetRandomString")
        .then(function (response) {
          // handle success
          console.log(response);
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        });
    },
    Websocketclick() {
      axios
        .get("http://139.196.222.182:5000/GetWebSocket") //.get("http://139.196.222.182:5000/GetWebSocket")
        .then(function (response) {
          // handle success
          console.log(response);
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        });
    },
    axiosEncapsulationRandom() {
      list({ pageNo: 1, pageSize: 20 }) //函数名以及传参
        .then((res) => {
          console.log(res); //成功后返回的数据
          var FileSaver = require("file-saver");
          var blob = new Blob([res], {
            type: "text/plain;charset=utf-8",
          });
          FileSaver.saveAs(blob, res + ".txt");
        });
    },
    axiosEncapsulationToken() {
      PostLogin({ username: "测试username" }) //函数名以及传参
        .then((res) => {
          //console.log(res); //成功后返回的数据
          this.$cookies.set("token", res.token, res.duration + "s"); //设置cookies对象 10秒后过期
          //console.log(this.$cookies.get("token")); //获取cookies对象
        });
    },
    SocketTestApi() {
      var server = "ws://139.196.222.182:5000"; //"ws://139.196.222.182:5000"; //如果开启了https则这里是wss，未开启https则是ws

      var WEB_SOCKET = new WebSocket(server + "/ws");

      WEB_SOCKET.onopen = function (evt) {
        console.log("Connection open ..." + evt);
      };

      /*WEB_SOCKET.onmessage = function (evt) {
        if (evt.data) {
          console.log("Received Message: " + evt.data);
        }
      };*/
      WEB_SOCKET.onmessage = function (evt) {
        if (evt.data) {
          console.log("Received Message: " + evt.data);
        }
      };

      WEB_SOCKET.onclose = function (evt) {
        console.log("Connection closed." + evt);
      };
    },
    jumpErrorPView() {
      this.$router.push({ path: "/error" });
    },
    jumpCommunication() {
      this.$router.push({ path: "/communication" });
    },
    clearToken() {
      this.$cookies.set("token", "", -1); //设置cookies对象 res.duration秒后过期});
      console.log(this.$cookies.get("token")); //获取cookies对象
    },
    SelMySQL() {
      Seltest({ type: "0" }).then((res) => {
        console.log(res);
      });
    },
    InsMySQL() {
      Instest({ type: "1" }).then((res) => {
        console.log(res);
      });
    },
    SaveFile() {
      var FileSaver = require("file-saver");
      var blob = new Blob(["Hello, world!"], {
        type: "text/plain;charset=utf-8",
      });
      FileSaver.saveAs(blob, "hello world.txt");
    },
  },
  setup() {
    //console.log("生命周期开始！");
  },
  mounted() {
    this.SocketTestApi();
  },
  watch: {
    $route: "SocketTestApi",
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
  color: rgb(202, 173, 173);
}
h3 {
  /*margin: 40px 0 0;*/
  color: rgb(202, 173, 173);
}
p {
  color: rgb(202, 173, 173);
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

.box {
  width: 100%; /*100vw;*/
  height: 1080px; /*1000px;*/
  background-color: black;
  position: absolute;
  z-index: -1;
}
</style>
